<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script type="text/javascript" th:src="@{/static/jquery-2.1.4.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/static/mylayer.js}"></script>
</head>
<body>
	<!--表格上侧是搜索框-->
	<form class="layui-form">
		名字:
		<div class="layui-inline">
			<input type="text" name="name" value="" class="layui-input" lay-affix="clear">
		</div>
		<div class="layui-inline">
			<button class="layui-btn" lay-submit lay-filter="submitSearch">搜索</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</form>

	<!--要渲染的table表格-->
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <!--右侧单元格工具条-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

	<!--表格上侧工具条：添加、批量删除-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteAll">批量删除</button>
        </div>
    </script>

    <script type="text/html" id="imageTemplet">
        <img src="/pic/{{d.image}}"/>
    </script>

	<script type="text/html" id="roleTemplet">
		{{#     if(d.role == 1) {             }}
				<span class="layui-badge layui-bg-orange">超级管理员</span>
		{{#     } else if(d.role == 2) {     }}
		       <span class="layui-badge layui-bg-green">普通管理员</span>
		{{#     }                            }}
	</script>

	<script type="text/html" id="statusTemplet">
		{{#     if(d.status == 1) {             }}
					正常
		{{#     } else if(d.status == 0) {     }}
					禁用
		{{#     }                            }}
	</script>

    <script>
		layui.use(['table','form', 'laydate', 'upload'], function(){
			var table = layui.table;
			var form = layui.form;
			var laydate = layui.laydate;
			var upload = layui.upload;

            //https://layui.dev/2.7/static/json/table/blogType.json?page=1&limit=10
            // http://localhost:8080/blogType/list?page=1&limit=10&name=zhangsan&email=shsdh
            table.render({
                elem: '#test'
                ,toolbar: '#toolbarDemo'
                ,url:'/blogType/list'
                ,cols: [
                    [
                    {type:'checkbox', fixed: 'left'}
                    ,{field:'id', title: 'ID', sort: true, fixed: 'left'}
                    ,{field:'name', title: '用户名'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]
                ]
                ,page: true
                ,id: 'tableId'
            });

			// 搜索提交
			form.on('submit(submitSearch)', function(data){
				var field = data.field; // 获得表单字段
				// 执行搜索重载
				table.reload('tableId', {
					page: {
						curr: 1 // 重新从第 1 页开始
					},
					where: field // 搜索的字段
					// http://localhost:8080/blogType?method=selectByPage&page=1&limit=10&name=zhangsan&credit=12
				});

				return false; // 阻止默认 form 跳转
			});

            // 上侧工具栏事件：添加、批量删除
            table.on('toolbar(test)', function(obj){
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch(obj.event){
                    case 'add':
                        layer.open({
                            type: 2,
                            area: ['90%', '90%'],
                            content: '/blogType/toBlogTypeAdd'
                        });
                        break;
                    case 'deleteAll':
                        var data = checkStatus.data;
                        //[{'id':1001,'name':'zhansgan'},{'id':1002,'name':'lisi'}]
                        var array = new Array();
                        for (var i = 0; i < data.length; i++) {
                            //data[i] : {'id':1001,'name':'zhansgan'}
                            array.push(data[i].id);
                        }
                        // [1001, 1002]
                        var ids = array.join(',');// '1001,1002'
                        layer.confirm('真的删除行么', function(index){
                            $.post(
                                '/blogType/deleteAll', //后台地址
                                {'ids': ids},    //传递数据
                                function (result) { //回调函数
                                    console.log(result);
                                    if (result.code == 0) {
                                        mylayer.okMsg(result.msg);
                                        //刷新表格，查询最新的数据
                                        table.reload('tableId');
                                    } else {
                                        mylayer.errorMsg(result.msg);
                                    }
                                },
                                'json'              //服务器返回数据是json格式
                            );
                        });
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('Table for layui-v'+ layui.v);
                        break;
                };
            });

            //触发右侧单元格工具事件：编辑、删除
            table.on('tool(test)', function(obj){ // 双击 toolDouble
                var data = obj.data;
                console.log(data)
                if(obj.event === 'del'){
					/*layer.confirm('真的要删除么?',  function () {
						// {}   [{},{},{}]
						$.post(
							'/blogType/deleteById',
							{'id': data.id},
							function (result) {
								if (result.code == 0) {
									mylayer.okMsg(result.msg);
									//刷新表格，查询最新的数据
									table.reload('tableId');
								} else {
									mylayer.errorMsg(result.msg);
								}
							},
							'json'
						);
					});*/
                    layer.confirm('真的删除行么', function(index){
                        //发送ajax请求
                        $.post(
                            '/blogType/deleteById', //后台地址
                            {'id': data.id},    //传递数据
                            function (result) { //回调函数
                                //{}  [{},{}]
                                //{code: 0, msg: '删除成功', data: null, ok: true}
                                console.log(result);
                                if (result.code == 0) {
                                    mylayer.okMsg(result.msg);
                                    //刷新表格，查询最新的数据
                                    table.reload('tableId');
                                } else {
                                    mylayer.errorMsg(result.msg);
                                }
                            },
                            'json'              //服务器返回数据是json格式
                        );

                    });
                } else if(obj.event === 'edit'){
                    layer.open({
                        title: '编辑',
						type: 2,
						area: ['90%', '90%'],
						content: '/blogType/toBlogTypeUpdate?id=' + data.id
                    });
                }
            });
        });
    </script>

</body>
</html>